// 登录页校验，验证当前用户是否登录
checkLogin()

// 页面数据渲染
renderUsername()
getData()

// 退出事件
document.querySelector('#logout').addEventListener('click', function () {
    showToast('正在退出！！！')
    localStorage.removeItem('token')
    setInterval(() => {
        location.href = './login.html'
    }, 1000)
})


// 更新用户名
function renderUsername() {
    const username = localStorage.getItem('username')
    document.querySelector('.username').innerHTML = username
}

// 获取看板所有数据
async function getData() {
    const token = localStorage.getItem('token')
    // 避免页面提示两次，如果没有token等待校验函数退出即可
    if (!token) return
    const res = await axios({ url: '/dashboard' })
    console.log(res);

    // 渲染overview数据
    renderOverview(res.data.overview)

    // 渲染echarts图表
    let lineChart = renderLine(res.data.year)
    let pieChart = renderPie(res.data.salaryData)
    let barChart = renderBar(res.data.groupData)
    let doublePieChatr = renderDoublePie(res.data.salaryData)
    let mapChart = renderMap(res.data.provinceData)

    // 绑定一个resize事件，使其图表自适应(使用闭包解决)
    window.addEventListener('resize',function(){
        lineChart()
        pieChart()
        barChart()
        doublePieChatr()
        mapChart()
    })
}
// 更新预览卡片
function renderOverview(data) {
    // console.log(data);
    for (let k in data) {
        if (k === 'age') {
            document.querySelector(`.${k}`).innerHTML = data[k].toFixed(2)
        } else {
            document.querySelector(`.${k}`).innerHTML = data[k]
        }
    }
}



// 渲染线图
function renderLine(data) {
    const myChart = echarts.init(document.querySelector('#line'))

    const option = {
        title: {
            text: '2022全学科薪资走势',
            left: '20px',
            top: '10px',
            textStyle: {
                color: '#333'
            }
        },
        tooltip: {},
        grid: {
            top: '14%',
            bottom: '10%',
            right: '5%',
            left: '10%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.map(item => item.month),
            axisLabel: {
                interval: 0, // 显示所有标签
                rotate: 0,   // 标签不旋转
                color: '#333' // 标签颜色
            },
            axisLine: {
                lineStyle: {
                    type: 'dashed', // 确保坐标轴线为实线
                    color: '#333'  // 坐标轴线颜色
                }
            },
            axisTick: {
                lineStyle: {
                    type: 'solid' // 确保刻度线为实线
                }
            },
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 25000,
            interval: 5000,
            axisLabel: {
                formatter: '{value}',
                color: '#333'
            }
        },
        series: [
            {
                name: '薪资',
                type: 'line',
                smooth: true, // 平滑曲线
                symbol: 'circle', // 点的形状
                symbolSize: 8, // 点的大小
                itemStyle: {
                    color: '#fff', // 点的填充颜色
                    borderColor: '#499eee', // 点的边框颜色
                    borderWidth: 2 // 点的边框宽度
                },
                lineStyle: {
                    color: '#499eee',// 线条颜色
                    width: 6
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                            offset: 0,
                            color: '#b5d8f8' // 起始颜色
                        }, {
                            offset: 0.7,
                            color: '#fff' // 结束颜色
                        }]
                    )
                },
                data: data.map(item => item.salary)
            }
        ]
    };

    myChart.setOption(option)
    return function (){
        myChart.resize()
    }
}
// 渲染饼图
function renderPie(data) {
    const myChart = echarts.init(document.querySelector('#salary'))

    const option = {
        title: {
            text: '班级薪资分布',
            left: '10%', // 标题居中
            top: '5%', // 标题距离顶部的距离
            textStyle: {
                color: '#333'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal', // 图例垂直排列
            left: 'left', // 图例位置在左侧
            // top: 'bottom', // 图例位置在底部
            bottom: '5%',
            data: data.map(item => item.label)
        },
        series: [
            {
                name: '薪资分布',
                type: 'pie',
                radius: ['44%', '60%'], // 内外半径，确保所有扇区宽度一致
                center: ['50%', '50%'], // 饼图中心位置
                // roseType: 'radius', // 设置为玫瑰图类型
                itemStyle: {
                    borderRadius: 20, // 边缘圆角
                    borderColor: '#fff', // 边框颜色
                    borderWidth: 2 // 边框宽度
                },
                label: {
                    show: false // 隐藏默认标签
                },
                emphasis: {
                    label: {
                        show: false,
                        position: 'center',
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false // 隐藏标签线
                },
                data: data.map(item => {
                    return {
                        value: item.g_count + item.b_count,
                        name: item.label
                    }

                })
            }
        ],
        color: ['#ff9800', '#2196f3', '#00bcd4', '#4caf50'] // 自定义颜色
    };

    myChart.setOption(option)
    return function (){
        myChart.resize()
    }
}
// 渲染柱状图
function renderBar(data) {
    const myChart = echarts.init(document.querySelector('#lines'))

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '10%',
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLabel: {
                formatter: '{value}'
            },
        },
        xAxis: {
            type: 'category',
            data: data[1].map(item => item.name),
            axisLabel: {
                rotate: 0,
                interval: 0
            }
        },
        axisLine: {
            lineStyle: {
                type: 'dashed', // 确保坐标轴线为实线
                color: '#333'  // 坐标轴线颜色
            }
        },
        series: [
            {
                name: '期望薪资',
                type: 'bar',
                data: data[1].map(item => item.hope_salary),
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#42d6a1' }, // 起始颜色
                            { offset: 1, color: '#42d6a166' } // 结束颜色
                        ]
                    )
                }
            },
            {
                name: '就业薪资',
                type: 'bar',
                data: data[1].map(item => item.salary),
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#54a5ef' }, // 起始颜色
                            { offset: 1, color: '#54a5ef66' } // 结束颜色
                        ]
                    )
                }
            }
        ]
    };

    // 事件绑定（tab切换）
    document.querySelector('#btns').addEventListener('click', function (e) {
        if (e.target.tagName === 'BUTTON') {
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')

            // 数据替换
            option.xAxis.data = data[e.target.innerHTML].map(item => item.name)
            option.series[0].data = data[e.target.innerHTML].map(item => item.hope_salary)
            option.series[1].data = data[e.target.innerHTML].map(item => item.salary)
            // 数据更新
            myChart.setOption(option)
        }
    })


    myChart.setOption(option)
    return function (){
        myChart.resize()
    }
}
// 渲染双饼
function renderDoublePie(data) {
    const myChart = echarts.init(document.querySelector('#gender'))

    var datas = [
        data.map(item => {
            return {
                value: item.b_count,
                name: item.label
            }
        }),
        data.map(item => {
            return {
                value: item.b_count,
                name: item.label
            }
        })
    ];

    const option = {
        title: [
            {
                text: '男女薪资分布',
                left: '5%',
                top: '5%',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 16
                }
            },
            {
                text: '男生',
                left: 'center',
                top: '50%',
                textStyle: {
                    color: '#999',
                    fontWeight: 'normal',
                    fontSize: 14
                }
            },
            {
                text: '女生',
                left: 'center',
                bottom: '2%',
                textStyle: {
                    color: '#999',
                    fontWeight: 'normal',
                    fontSize: 14
                }
            }
        ],
        grid: [
            {
                top: '20%',
                bottom: '20%',
                left: '10%',
                right: '10%'
            },
            {
                top: '60%',
                bottom: '20%',
                left: '10%',
                right: '10%'
            }
        ],
        series: datas.map(function (data, idx) {
            var top = idx === 0 ? '30%' : '74%';
            return {
                type: 'pie',
                radius: ['34%', '50%'],
                center: ['50%', top],
                data: data
            };
        }),
    };


    myChart.setOption(option)
    return function (){
        myChart.resize()
    }
}
// 渲染地图
function renderMap(data) {
    const myChart = echarts.init(document.querySelector('#map'))
    
    const option = {
        title: {
            text: '籍贯分布',
            left: '20px',
            top: '10px',
            textStyle: {
                color: '#333'
            }
        },
        visualMap: {
            min: 0,
            max: 1000,
            left: '2%',
            top: 'bottom',
            text: ['高', '低'],
            calculable: false,
            orient: 'vertical',
            inRange: {
                color: ['#e0ffff', '#006edd'],
                symbolSize: [100, 100]
            }
        },
        tooltip: {
            padding:8,
            transitionDuration: 1,
            textStyle: {
                color: '#000',
            }
        },
        series: [{
            name: '学院就业数量',
            type: 'map',
            mapType: 'china',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            label: {
                normal: { //静态的时候展示样式
                    show: true, //是否显示地图省份得名称
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    }
                },
                emphasis: { //动态展示的样式
                    color: '#fff',
                },
            },
            data: [{
                    name: '北京',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '天津',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '上海',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '重庆',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '河北',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '河南',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '云南',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '辽宁',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '黑龙江',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '湖南',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '安徽',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '山东',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '新疆',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '江苏',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '浙江',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '江西',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '湖北',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '广西',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '甘肃',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '山西',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '内蒙古',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '陕西',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '吉林',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '福建',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '贵州',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '广东',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '青海',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '西藏',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '四川',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '宁夏',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '海南',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '台湾',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '香港',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
                {
                    name: '澳门',
                    value: Math.round(Math.random() * 1000),
                    tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
                },
            ]
        }, ]
    }

    myChart.setOption(option)
    return function (){
        myChart.resize()
    }
}